<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器实例</title>
</head>
<body>
  <div id="app">
   <h1>{{date|format_date('yyyy-MM-dd')}}</h1>
  </div>
  <script src="vue.js"></script>
  <script>
    Date.prototype.format = function (fmt) {
      const o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
    //全局过滤器
    Vue.filter('format_date',(val,pattern)=>{
      console.log(val);
      return val.format(pattern)
    })
    const vm = new Vue({
      el:"#app",
      data:{
        date:new Date()
      },
    })
  </script>
</body>
</html>